<template>
	<view>
		<template v-if="topshow">
			<u-navbar :title="beizhuname+(online==1?'(在线)':online==0?'(离线)':'')" placeholder autoBack bgColor="#fff">
				<view class="flexright xiaohui" slot="right" @click="beizhushow=true">
					<u-icon name="edit-pen-fill" color="#2979ff" size="20"></u-icon>
				</view>
			</u-navbar>
		</template>
		<u-modal :show="beizhushow" title="设置备注" confirmText="确认" @confirm="beizhuconfirm" cancelText="取消"
			@cancel="beizhushow=false;beizhutext=''" showCancelButton>
			<view class="slot-content" style="width: 600rpx;">
				<input type="text" class="textcenter" placeholder="请输入备注内容" v-model="beizhutext">
			</view>
		</u-modal>
		<view class="cu-chat" style="padding-bottom: 180rpx;">
			<view class="" id="scroll-view-content">
				<view class="" :id="'maodian'+item.id" v-for="item in list.data" :key="item.id">
					<view class="flexcenter" v-if="item.is_timeshow">
						<view class="cu-info  round">{{item.createtime_text}}</view>
					</view>
					<view class="cu-item" :class="item.sender_id==user_id?'self':''">
						<!-- 好友的头像 -->
						<view class="cu-avatar radius" v-show="item.sender_id!=user_id"
							:style="{backgroundImage:'url('+item.sender.avatar_text+')'}"
							@click="jumpzhuye(item.sender_id)"></view>
						<!-- //1=文字,2=图片,3=视频 -->
						<view class="main" v-if="item.data_type==1">
							<view class="content shadow" style="display: flex;"
								:class="item.sender_id==user_id?'lanbgc':''">
								<view style="display: flex;flex-wrap: wrap;">
									<view v-for="ite in item.content_text">
										<!-- <u-tooltip :text="it.value" :buttons="['撤回']" :showCopy="false" :overlay="false" @click="backMsg(ite)" v-show="it.type==1"></u-tooltip> -->
										<text v-show="ite.type=='text'">{{ite.value}}</text>
										<image v-if="ite.type=='emoji'" style="width: 40rpx;height: 40rpx;top:6rpx;"
											:src="'../static/emojis/qq/'+ite.attrs.src+''" mode=""></image>
									</view>
								</view>
							</view>
						</view>
						<!-- 图片 -->
						<view class="main" v-if="item.data_type==2">
							<view class="" @click="lbtpriview(0,[item.message_text])">
								<image style="width: 300rpx;border-radius: 10rpx;" :src="item.message_text"
									mode="widthFix"></image>
							</view>
						</view>
						<!-- 视频 -->
						<view class="main" v-if="item.data_type==3">
							<view class="">
								<video style="width: 400rpx;height: 300rpx;" :id="'videoId'+item.id"
									:src="item.message_text" @play="play(item.id)"
									@fullscreenchange="fullscreenchange($event,item.id)" v-show="isVideoShow"></video>
								<view class="videoBox" @click="playBox(item)"
									:style="{backgroundImage:'url('+item.message_text+'?x-oss-process=video/snapshot,t_10000,m_fast'+')'}"
									v-show="!isVideoShow"></view>
							</view>
						</view>
						<!-- 分享的视频 -->
						<view class="main" v-if="item.data_type==4"
							@click="shipin(item.video_data.id,item.video_data.user_id)">
							<view class="">
								<view class="videoBox2"
									:style="{backgroundImage:'url('+item.video_data.video_url_text+'?x-oss-process=video/snapshot,t_10000,m_fast'+')'}">
								</view>
							</view>
						</view>
						<!-- 分享的动态 -->
						<view class="main" v-if="item.data_type==5" @click="tzdtxq(item.dt_data.id)">
							<view class="flexleft shadow" style="border-radius: 15rpx;">
								<image :src="item.dt_data.user.avatar_text" class="leftimgdt" mode=""></image>
								<view class="ffffff rightboxdt">
									<view class="ershiba xiaohei lianghang" style="width: 250rpx;text-align: left;">
										{{item.dt_data.content}}
									</view>
									<view class="strongtext xiaohui xiankuan" style="width: 250rpx;text-align: left;">
										{{item.dt_data.qwdx}}
									</view>
								</view>
							</view>
						</view>
						<!-- 视频通话 -->
						<view class="main" v-if="item.data_type==6" @click="showmodal(2)">
							<view class="content shadow" style="display: flex;"
								:class="item.sender_id==user_id?'lanbgc':''">
								<view style="display: flex;">
									<u-icon name="play-circle" v-if="item.sender_id==user_id" color="#fff"
										size="20"></u-icon>
									<u-icon name="play-circle" v-if="item.sender_id!=user_id" color="#333"
										size="20"></u-icon>
									<text>{{item.message}}</text>
								</view>
							</view>
						</view>
						<!-- 语音通话 -->
						<view class="main" v-if="item.data_type==7" @click="showmodal(1)">
							<view class="content shadow" style="display: flex;"
								:class="item.sender_id==user_id?'lanbgc':''">
								<view style="display: flex;">
									<u-icon name="phone" v-if="item.sender_id==user_id" color="#fff" size="20"></u-icon>
									<u-icon name="phone" v-if="item.sender_id!=user_id" color="#333" size="20"></u-icon>
									<text>{{item.message}}</text>
								</view>
							</view>
						</view>
						<!-- 发送时间 -->
						<!-- <view class="date ">{{item.createtime_text}}</view> -->
						<!-- 我的头像 -->
						<view class="cu-avatar radius" :style="{backgroundImage:'url('+item.sender.avatar_text+')'}"
							v-show="item.sender_id==user_id" @click="jumpzhuye(item.sender_id)"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="cu-bar input mainpadding">
				<!-- 输入框 -->
				<textarea @tap="emoteShow=false" class="solid-bottom" style="height: 60rpx;" cursor-spacing="200"
					placeholder="输入新消息" confirm-type="send" @confirm="send" maxlength="300"
					v-model="content"></textarea>
				<!-- <template v-if="userinfo.chat_days!=0">
					<textarea @tap="emoteShow=false" class="solid-bottom" style="height: 60rpx;" cursor-spacing="200"
						placeholder="输入新消息" confirm-type="send" @confirm="send" maxlength="300"
						v-model="content"></textarea>
				</template>
				<template v-else>
					<textarea @tap="fuwu" class="solid-bottom" style="height: 60rpx;" cursor-spacing="200"
						placeholder="畅聊时间已用尽,点击选择服务充值畅聊时间!" disabled></textarea>
				</template> -->
				<button class="cu-btn bg-green" style="background-color: #2361ff;min-width: 120rpx;" v-show="isSendShow"
					@click="send">发送</button>
			</view>
			<view class="flexbetween mainpadding2" v-if="dbshow">
				<!-- 电话 -->
				<image src="@/static/image/system/phone.png" mode="" v-if="!isSH" class="bottomopenbtn"
					@click="showmodal(1)">
				</image>
				<!-- 视频电话 -->
				<image src="@/static/image/system/videophone.png" mode="" v-if="!isSH" class="bottomopenbtn"
					@click="showmodal(2)">
				</image>
				<!-- 礼物 -->
				<image src="@/static/image/system/ltlw.png" mode="" v-if="!isSH" class="bottomopenbtn"
					@click="liwufn()"></image>
				<!-- 图库 -->
				<image src="@/static/image/system/tp.png" mode="" class="bottomopenbtn" @click="selectfile()"></image>
				<!-- 表情 -->
				<image src="@/static/douyin/biaoqing-2.png" mode="" class="bottomopenbtn" @click="biaoqing()">
				</image>
			</view>
			<!-- 礼物 -->
			<liwu ref="liwurefs" :send_user_id="firend_id" @callphone="callPhone" @sendlw="sendlw"></liwu>
			<!-- 表情包 -->
			<swiper class="swiper" v-if="emoteShow">
				<swiper-item v-for="(item,index) in chat_memes" :key="index">
					<view class="emote ffffff">
						<view class="flexleft flex-wrap">
							<view class="item_emote_box flexcenter" v-for="ite in chat_memes[index]" :key="ite.url"
								@click="enterEmote(ite)">
								<image :src="'../static/emojis/qq/'+ite.url+''" class="item_emote_img" mode=""></image>
								<!-- <image src="../static/emojis/qq/0@2x.gif" mode=""></image> -->
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- #ifdef APP-PLUS -->
		<yk-authpup ref="authpup" type="top" @changeAuth="changeAuth" :permissionID="permissionID"></yk-authpup>
		<!-- #endif -->
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import WebSocket from '@/static/websocket.js' //websocket封装
	import emojiList from '@/common/emoji/biaoqin.js'
	// #ifdef APP-PLUS
	const TUICallKit = uni.requireNativePlugin('TencentCloud-TUICallKit');
	import ykAuthpup from "@/components/yk-authpup/yk-authpup";
	// #endif
	export default {
		// #ifdef APP-PLUS
		components: {
			ykAuthpup
		},
		// #endif
		data() {
			return {
				content: "",
				scrollTop: "",
				user_id: "", //本人id
				chat_memes: [], //表情包数组
				emoteShow: false, //表情是否展示
				isSendShow: false, //加号、发送按钮是否展示
				liwushow: false,
				page: 1,
				list: {
					data: []
				},
				isVideoShow: false, //是否显示视频
				firend_id: "", //对方的id
				firend_name: "", //对方的名称
				firend_avatar_text: "", //对方的头像
				currenti: 1,
				isload: false,
				userinfo: {},
				permissionID: '',
				sourceType: ['camera'],
				upnum: 0,
				chooseType: 1,
				isSH: false,
				dbshow: true,
				beizhuname: "", //用户备注
				beizhutext: "", //用户要修改的备注
				beizhushow: false,
				topshow: false,
				online: -1, //0离线，1在线
				is_black: 0, //0为拉黑，1拉黑了
				isdf_black: 0, //0为拉黑，1拉黑了
				websocket: null,
			}
		},
		watch: {
			content(newVal) {
				newVal ? this.isSendShow = true : this.isSendShow = false
			}
		},
		onLoad(options) {
			let that = this
			let data = JSON.parse(decodeURIComponent(options.msg));
			// console.log(data, "接受参数");
			this.user_id = uni.getStorageSync("user_id")
			this.firend_id = data.firend_id;
			this.firend_name = data.friend_name;
			this.firend_avatar_text = data.firend_avatar_text;
			// uni.setNavigationBarTitle({
			// 	title: that.firend_name
			// });
			this.getinline()
			uni.$on("changliaofn", data => {
				this.$refs.liwurefs.userinfo()
			})
			uni.$on("updatechatFnte", data => {
				console.log("触发方法了哈哈哈");
				this.updatechat()
			})
			uni.$on("calltelephoneFn", data => {
				this.setaddMsg(data)
			})
			uni.$on("chexiaomsg", data => {
				console.log("监听到对方撤回消息了", data);
				this.list.data.forEach(current => {
					if (current.id == data) {
						current.msg_status = 2
					}
				})
			})
			this.init()
			this.chat_memes = this.chuliemo(emojiList, 50)
			this.getsystem()
			this.getfirendInfo()
			if (uni.getSystemInfoSync().platform != 'ios') {
				this.checkAndRequestAlertPermission();
			}
		},
		onShow() {
			this.getinfo()
		},
		onUnload() {
			uni.$off('updatechatFnte')
			uni.$off('chexiaomsg')
			uni.$off("changliaofn")
			uni.$off("calltelephoneFn")
		},
		onPullDownRefresh() { //下拉刷新
			let _this = this;
			let list = _this.list;
			let page = _this.page;
			if (list.last_page <= page) {
				uni.stopPullDownRefresh()
				return false;
			}
			page++;
			_this.page = page;
			_this.init(true, page);
		},
		methods: {
			checkAndRequestAlertPermission() {
				// 判断是否有后台弹窗权限
				if (plus.runtime.isPermissionAuthorized('COM.ANDROID.ALERT_WINDOW')) {
					console.log('已经获得后台弹窗权限');
				} else {
					// 请求后台弹窗权限
					plus.runtime.requestPermission({
						name: 'COM.ANDROID.ALERT_WINDOW',
						authorizedCallback: function() {
							console.log('用户授权了后台弹窗权限');
						},
						deniedCallback: function() {
							console.log('用户拒绝了后台弹窗权限请求');
						},
						neverAskAgainCallback: function() {
							console.log('用户选择不再询问，且权限被拒绝');
						}
					});
				}
			},
			getfirendInfo() {
				httpRequest.request('/api/index/userPage', 'GET', {
					id: this.firend_id,
				}).then(res => {
					this.is_black = res.data.is_black
					this.isdf_black = res.data.isdf_black
				})
			},
			tzdtxq(id) {
				uni.navigateTo({
					url: '/pages_fabu/dongtaixq?id=' + id
				})
			},
			shipin(id, userid) {
				console.log("测试");
				uni.navigateTo({
					url: "/pages_homepage/shipin/shipin?id=" + id + "&userid=" + userid
				})
			},
			beizhuconfirm() {
				if (this.beizhutext == "") {
					httpRequest.toast("备注不能为空")
					return false
				}
				this.beizhuname = this.beizhutext
				this.beizhushow = false
				httpRequest.request('/api/user/setUserBz', 'GET', {
					user_id: this.firend_id,
					bz: this.beizhutext,
				}).then(res => {

				})
			},
			getinline() {
				httpRequest.request('/webim/Friends/checkUserOnline', 'GET', {
					user_id: this.firend_id,
				}).then(res => {
					this.online = res.data.isOnline
					if (res.data.userbz) {
						this.beizhuname = res.data.userbz.bz
					} else {
						this.beizhuname = this.firend_name
					}
					this.topshow = true
				})
			},
			getsystem() {
				let system = uni.getSystemInfoSync()
				let version_code = system.appVersionCode
				let platform = system.platform
				console.error(version_code, platform, system);
				httpRequest.request('/api/index/checkApply', 'GET', {
					platform,
					version_code
				}).then(res => {
					// console.log(version_code, platform, res);
					this.isSH = res.data
					this.dbshow = true
				})
			},
			openAuth(permissionID) {
				this.permissionID =
					permissionID; //这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
				setTimeout(() => {
					this.$refs['authpup'].open();
				}, 500)
			},
			biaoqing() {
				// if (this.userinfo.chat_days == 0) {
				// 	this.fuwu()
				// 	return false
				// }
				this.emoteShow = true
			},
			fuwu(val) {
				httpRequest.toast("当前已无免费聊天资格，请购买服务！")
				if (val == 1) {
					this.$refs.liwurefs.upimg = true
				} else {
					this.$refs.liwurefs.upimg = false
				}
				this.$refs.liwurefs.sendshow = true
				this.$refs.liwurefs.currenttype = 2
				this.$refs.liwurefs.tonghuashow = false
				this.$refs.liwurefs.chongzhishow = false
				this.$refs.liwurefs.show = true
			},
			getinfo() {
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					this.userinfo = res.data
					this.$refs.liwurefs.userinfofn()
				})
			},
			selectfile(val) {
				if (!this.isSH) {
					if (val != 1 && !this.userinfo.is_plg) {
						if (this.userinfo.chat_days == 0) {
							this.fuwu(1)
							return false
						}
					}
				}
				let that = this
				uni.showActionSheet({
					itemList: ['照片', '视频'],
					success: function(res) {
						// 选择照片走0
						if (res.tapIndex == 0) {
							that.uploadImg()
						}
						// 选择视频走1
						if (res.tapIndex == 1) {
							that.upvideo()
						}
					},
					fail: function(res) {}
				});
			},
			uploadImg() { //上传图片
				let _this = this
				this.chooseType = 1
				uni.showActionSheet({
					itemList: ['拍摄', '从相册选择'],
					success: function(res) {
						if (uni.getSystemInfoSync().brand.toLowerCase() === 'huawei') {
							if (res.tapIndex == 0) {
								_this.openAuth('CAMERA');
								_this.sourceType = ['camera'];
							} else {
								_this.openAuth('WRITE_EXTERNAL_STORAGE');
								_this.sourceType = ['album'];
							}

						} else {
							if (res.tapIndex == 0) {

								_this.sourceType = ['camera'];
							} else {

								_this.sourceType = ['album'];
							}
							_this.changeAuth();
						}

					},
					fail: function(res) {}
				});
			},
			changeAuth() {
				let _this = this;
				//这里是权限通过后执行自己的代码逻辑
				if (this.chooseType == 1) {
					// 选择相机走0
					if (this.sourceType == "camera") {
						httpRequest.chooseImage(1, ['camera']).then(res => {
							for (var i = 0; i < res.length; i++) {
								_this.IMGuploadImageService(res[i])
							}
						}).catch(err => {});
					}
					// 选择相册走1
					if (this.sourceType == "album") {
						httpRequest.chooseImage(1, ['album']).then(res => {
							for (var i = 0; i < res.length; i++) {
								_this.IMGuploadImageService(res[i])
							}
						}).catch(err => {});
					}
				}
				if (this.chooseType == 2) {
					// 1.选择要上传的视频
					uni.chooseVideo({
						maxDuration: 60, // 拍摄视频最长拍摄时间，单位秒。最长支持 60 秒。
						sourceType: ['album', 'camera'], // album 从相册选视频，camera 使用相机拍摄，默认为：['album', 'camera']
						success: function(res) {
							_this.VIDEOuploadImageService(res.tempFilePath)
						}
					});
				}
			},
			sendlw(url) {
				let data = {
					mine: {
						id: uni.getStorageSync("user_id"),
						content: url,
						data_type: 2, //1=文字,2=图片,3=视频
					},
					to: {
						id: this.firend_id,
						type: "friend"
					},
					client_id: uni.getStorageSync("client_id"),
					ly: 1
				}
				this.sendother(data,1)
			},
			IMGuploadImageService(url) { //图片转载
				let _this = this;
				httpRequest.uploadFile('/addons/cos/index/upload1', url).then(res => {
					let data = {
						mine: {
							id: uni.getStorageSync("user_id"),
							content: res.url,
							data_type: 2, //1=文字,2=图片,3=视频
						},
						to: {
							id: this.firend_id,
							type: "friend"
						},
						client_id: uni.getStorageSync("client_id")
					}
					this.sendother(data)
				}).catch(err => {});
			},
			upvideo() { //上传视频
				let _this = this;
				_this.chooseType = 2;
				if (uni.getSystemInfoSync().brand.toLowerCase() === 'huawei') {
					uni.showActionSheet({
						itemList: ['相机', '相册'],
						success: function(res) {
							if (res.tapIndex == 0) {
								_this.openAuth('CAMERA');
								_this.sourceType = ['camera'];
							} else {
								_this.openAuth('WRITE_EXTERNAL_STORAGE');
								_this.sourceType = ['album'];
							}
						},
						fail: function(res) {}
					});
				} else {
					_this.sourceType = ['album'];
					_this.changeAuth();
				}



			},
			VIDEOuploadImageService(url) { //视频转载
				let _this = this;
				httpRequest.uploadFile('/addons/cos/index/upload1', url).then(res => {
					let data = {
						mine: {
							id: uni.getStorageSync("user_id"),
							content: res.url,
							data_type: 3, //1=文字,2=图片,3=视频
						},
						to: {
							id: this.firend_id,
							type: "friend"
						},
						client_id: uni.getStorageSync("client_id")
					}
					this.sendother(data)
				}).catch(err => {});
			},
			liwufn() {
				this.$refs.liwurefs.currenttype = 1
				this.$refs.liwurefs.tonghuashow = false
				this.$refs.liwurefs.show = true
			},
			chuliemo(arr, num) { //转化为50等分的数组,(表情包使用)
				var newArr = []
				for (var i = 0; i < arr.length; i += num) {
					newArr.push(arr.slice(i, i + num))
				}
				return newArr
			},
			updatechat() { //更新最新一一条消息到消息列表
				if (!this.isload) {
					return false
				}
				httpRequest.request('/api/user/chatRecordIndex', 'GET', {
					page: 1,
					limit: 1,
					user_id: this.firend_id,
				}).then(res => {
					if (this.list.data.length != 0 && res.data.data[0].id == this.list.data[this.list.data.length -
							1].id) { //防止重复添加数据
						return false
					}
					this.list.data.push(res.data.data[0])
					let ids = [0]
					res.data.data.forEach(item => {
						if (item.sender_id != this.user_id) {
							ids.push(item.id)
						}
					})
					this.readNews(ids.join())
					this.scrollToBottom()
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			init(isPage, page) {
				let _this = this
				httpRequest.request('/api/user/chatRecordIndex', 'GET', {
					page: page || 1,
					limit: 10,
					user_id: this.firend_id,
				}).then(res => {
					// console.log(">>>>>>>>>>>>>", res);
					this.isload = true
					uni.stopPullDownRefresh()
					let ids = [0]
					res.data.data.forEach(item => {
						if (item.sender_id != this.user_id) {
							ids.push(item.id)
						}
					})
					this.readNews(ids.join())
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = resList.data.reverse().concat(dataList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data.reverse();
							this.scrollToBottom()
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			playBox(item) {
				let res = uni.getSystemInfoSync().platform;
				if (res == "ios") {
					uni.navigateTo({
						url: "/pages_message/videopage?url=" + item.message_text,
					})
				} else {
					let i = item.id
					this.isVideoShow = true
					let videoContext = uni.createVideoContext(`videoId${i}`)
					videoContext.play();
				}
			},
			play(i) { // 播放时进入全屏
				let videoContext = uni.createVideoContext(`videoId${i}`, this)
				videoContext.requestFullScreen()
			},
			fullscreenchange(e, i) { //退出全屏时暂停
				if (!e.detail.fullScreen) {
					uni.createVideoContext(`videoId${i}`, this).pause();
					this.isVideoShow = false
				}
			},
			async showmodal(val) {
				if (this.isSH) {
					this.currenti = val
					this.callPhone()
					return false
				}
				uni.showLoading({
					title: "请稍后",
					mask: true
				})
				let res = await httpRequest.request('/api/user/checkYyspRule', 'GET', {
					to_user_id: this.firend_id,
					chat_type: val
				})
				if (res.code != 1) {
					httpRequest.toast(res.msg)
					return false
				}
				uni.hideLoading()
				this.currenti = val
				this.$refs.liwurefs.show = true
				this.$refs.liwurefs.tonghuashow = true
				this.$refs.liwurefs.tonghuaflag = val
				this.$refs.liwurefs.tonghuajg = res.data.pl_price
			},
			async callPhone() { //音、视频通话
				if (!this.isSH) {
					let res = await httpRequest.request('/api/user/checkYyspRule', 'GET', {
						to_user_id: this.firend_id,
						chat_type: this.currenti
					})
					if (res.code != 1) {
						httpRequest.toast(res.msg)
						return false
					}
				}
				if (this.isdf_black == 1) {
					httpRequest.toast("对方已拉黑，无法给对方拨打电话")
					return false
				}
				if (this.is_black == 1) {
					httpRequest.toast("已拉黑对方，无法给对方拨打电话")
					return false
				}
				let enterdata = {
					type: 1, //1拨打，2接听
					friend_name: this.beizhuname,
					firend_avatar_text: this.firend_avatar_text,
					firend_id: this.firend_id
				}
				if (this.currenti == 1) { //语音通话，
					uni.navigateTo({
						url: "/pages_message/yuyinth?msg=" + encodeURIComponent(JSON.stringify(enterdata))
					})
				} else { //视频通话
					uni.navigateTo({
						url: "/pages_message/shipinth?msg=" + encodeURIComponent(JSON.stringify(enterdata))
					})
					console.log("进入视频通话");
				}
				// getApp().globalData.firend_id = this.firend_id
				// getApp().globalData.callMediaType = this.currenti
				// const optionsName = {
				// 	nickName: this.$refs.liwurefs.userinfo.nickname,
				// 	avatar: this.$refs.liwurefs.userinfo.avatar_text,
				// }
				// TUICallKit.setSelfInfo(optionsName, (res) => { //设置自己的头像昵称
				// 	if (res.code === 0) {
				// 		console.log('setSelfInfo success');
				// 	} else {
				// 		console.log(`setSelfInfo failed, error message = ${res.msg}`);
				// 	}
				// });
				// TUICallKit.enableFloatWindow(true); //是否展示最小化的按钮浮窗
				// const options = { //开始通话
				// 	userID: String(this.firend_id),
				// 	callMediaType: this.currenti, // 语音通话(callMediaType = 1)、视频通话(callMediaType = 2)
				// };
				// TUICallKit.call(options, (res) => {
				// 	if (res.code === 0) {
				// 		console.log('call success');
				// 	} else {
				// 		console.log(`call failed, error message = ${res.msg}`);
				// 	}
				// });
			},
			enterEmote(item) {
				this.content = this.content + item.alt
			},
			readNews(ids) { //读取消息,增加已读 状态
				httpRequest.request('/api/user/setMessageStatus', 'GET', {
					ids
				}).then(res => {})
			},
			sendother(data,val) { //发送其他类型的消息
				if (this.isdf_black == 1) {
					httpRequest.toast("对方已拉黑，无法发送")
					return false
				}
				if (this.is_black == 1) {
					httpRequest.toast("已拉黑对方，无法发送")
					return false
				}
				let system = uni.getSystemInfoSync()
				let version_code = system.appVersionCode
				let platform = system.platform
				this.$set(data, "version_code", version_code)
				this.$set(data, "platform", platform)
				httpRequest.request('/webim/Friends_Message/add', 'POST', data).then(res => {
					if (res.code == 1) {
						if(val==1){
							httpRequest.toast("发送成功")
						}
						// this.updatechat()
						this.setaddMsg(res.data)
					}
					if(res.code==403){
						httpRequest.toast("连接断开,重连中，请重试")
						this.websocketStart()
					}
				})
			},
			websocketStart() {
				this.websocket = new WebSocket("wss://kuaixun.yongshunqiyuewangluo.com:8282");
				this.websocket.connect()
				this.websocket.onMessage(result => {
					console.log('app.js收到服务器内容：' + result.data);
				})
			},
			setaddMsg(message) {
				this.list.data.push(message)
				this.scrollToBottom()
			},
			send(val) { //发送消息
				if (this.content == "") {
					httpRequest.toast("发送消息不能为空！")
					return false
				}
				if (this.isdf_black == 1) {
					httpRequest.toast("对方已拉黑，无法发送")
					return false
				}
				if (this.is_black == 1) {
					httpRequest.toast("已拉黑对方，无法发送")
					return false
				}
				if (!this.isSH) {
					if (val != 1 && !this.userinfo.is_plg) {
						if (this.userinfo.chat_days == 0) {
							this.fuwu()
							return false
						}
					}
				}
				let system = uni.getSystemInfoSync()
				let version_code = system.appVersionCode
				let platform = system.platform
				this.emoteShow = false
				let data = {
					mine: {
						id: uni.getStorageSync("user_id"),
						content: this.content,
						data_type: 1, //1=文字,2=图片,3=视频
					},
					to: {
						id: this.firend_id,
						type: "friend"
					},
					client_id: uni.getStorageSync("client_id"),
					version_code,
					platform
				}
				httpRequest.request('/webim/Friends_Message/add', 'POST', data).then(res => {
					if (res.code == 1) {
						// this.updatechat()
						this.setaddMsg(res.data)
					}
					if(res.code==403){
						httpRequest.toast("连接断开,重连中，请重试")
						this.websocketStart()
					}
				})
				this.content = ""

			},
			emoteList(arr, num) { //转化为50等分的数组,(表情包使用)
				var newArr = []
				for (var i = 0; i < arr.length; i += num) {
					newArr.push(arr.slice(i, i + num))
				}
				return newArr
			},
			scrollToBottom() { //滚动到底部
				let that = this
				if (that.list.data.length) {
					this.$nextTick(() => {
						uni.pageScrollTo({
							selector: '#maodian' + that.list.data[that.list.data.length - 1]
								.id, // 要跳转到的锚点元素的选择器或者id
							duration: 10 // 过渡时间（单位ms）
						});
					})
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.shadows {
		border-radius: 15rpx;
		box-shadow: 0px 2px 8px 1px;
		background-color: #fff;
	}

	.leftimgdt {
		width: 150rpx;
		height: 150rpx;
		border-radius: 15rpx 0 0 15rpx;
	}

	.rightboxdt {
		border-radius: 0 15rpx 15rpx 0;
		padding: 15rpx;
	}

	/deep/.u-navbar--fixed {
		z-index: 1000 !important;
	}

	/deep/.uni-textarea-wrapper {
		height: 40rpx;
	}

	.lanbgc {
		background-color: #2361ff !important;
		color: #fff !important;
	}

	.bottomopenbtn {
		width: 50rpx;
		height: 50rpx;
	}

	/deep/.u-tooltip__wrapper {
		white-space: normal;
		flex-shrink: 1;
	}

	/deep/.u-tooltip__wrapper__popup__list__btn__text {
		white-space: nowrap;
	}

	.hidden {
		display: none !important;
	}

	.record {
		width: 39vw;
		height: 39vw;
		position: fixed;
		top: 35%;
		left: 30%;
		background-color: rgba(0, 0, 0, 0.8);
		border-radius: 40rpx;
	}

	.record .ing {
		width: 100%;
		height: 30vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	@keyframes volatility {
		0% {
			background-position: 0% 130%;
		}

		20% {
			background-position: 0% 150%;
		}

		30% {
			background-position: 0% 155%;
		}

		40% {
			background-position: 0% 160%;
		}

		50% {
			background-position: 0% 145%;
		}

		70% {
			background-position: 0% 150%;
		}

		80% {
			background-position: 0% 170%;
		}

		90% {
			background-position: 0% 160%;
		}

		100% {
			background-position: 0% 135%;
		}
	}

	.record .ing [class*='wlIcon'] {
		background-image: linear-gradient(to bottom, #ffffff, #565656 50%);
		background-size: 100% 200%;
		animation: volatility 1.5s ease-in-out -1.5s infinite alternate;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-size: 140rpx;
		padding-top: 40rpx;
		color: #f09b37;
	}

	.record .cancel {
		width: 100%;
		height: 30vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.record .cancel [class*='wlIcon'] {
		color: #fff;
		font-size: 150rpx;
	}

	.record .tis {
		width: 100%;
		height: 10vw;
		display: flex;
		justify-content: center;
		font-size: 24rpx;
		color: #fff;
	}

	.record .tis.change {
		color: #f09b37;
	}

	.managerImg {
		width: 60%;
		height: 80%;
	}

	.removeImg {
		width: 60%;
		height: 60%;
	}

	.audioImg {
		width: 40rpx;
		height: 40rpx;
	}

	.videoBox {
		border-radius: 10rpx;
		width: 400rpx;
		height: 300rpx;
		// background-color: #000;
		position: relative;
		background-size: 100% 100%;
	}

	.videoBox2 {
		border-radius: 10rpx;
		width: 400rpx;
		height: 600rpx;
		// background-color: #000;
		position: relative;
		background-size: 100% 100%;
	}

	.videoBox2::after {
		content: '';
		width: 50rpx;
		height: 50rpx;
		background-image: url('@/static/img/index/play.png');
		background-size: 100% 100%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.videoBox::after {
		content: '';
		width: 50rpx;
		height: 50rpx;
		background-image: url('@/static/img/index/play.png');
		background-size: 100% 100%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.service_box {
		height: 350rpx;
	}

	.item_service_box {
		z-index: 1000000;
		width: 25%;
		margin-top: 15rpx;

	}

	.item_service {
		width: 150rpx;
		height: 150rpx;
		border: 1rpx solid rgba(255, 255, 255, .06);
	}

	.foot {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		z-index: 100;
	}

	.swiper {
		background-color: #ffffff;
		height: 350rpx;
	}

	.emote {
		padding: 0 30rpx 30rpx;
	}

	.item_emote_box {
		z-index: 1000000;
		width: 10%;
		margin-top: 15rpx;

	}

	.item_emote_img {
		width: 50rpx;
		height: 50rpx;
	}

	.imgJia {
		width: 48rpx;
		height: 48rpx;
		margin-top: -5rpx;
	}

	/deep/.u-navbar {
		z-index: 10000000;
	}
</style>